<template>
  <view class="page">
    <view class="b-search">
      <input
        type="text"
        placeholder="搜索"
        maxlength="10"
        placeholder-style="font-size:14px;color:#bbb"
        @tap="toSearchPage"
      />
      <view class="btn">
        搜索
      </view>
      <uniIcons
        type="search"
        size="22"
        color="#bbb"
        class="icon"
      ></uniIcons>
    </view>
    <view class="b-title">
      <graceNav
        :items="tabs"
        :currentIndex="tabIndex"
        @change="tabChange"
        :size='180'
      ></graceNav>
    </view>
    <view class="b-goods">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        :style="{'height':screenHeight-200 +'px'}"
        @scrolltolower="scrollBottom"
        lower-threshold=10
      >

        <view
          class="b-goods__item"
          v-for="(item,index) in cabinetData"
          :key="index"
        >

          <view
            class="radio"
            :class="[item.checked ? 'b-goods__item--checked' : ' ']"
            @tap="handleSelect(index)"
          ></view>
          <view class="b-goods__item-left">
            <image :src="item.coverPic? 'https://expay-mall.s3-sa-east-1.amazonaws.com' + item.coverPic : ''"></image>
          </view>
          <view
            class="b-goods__item-right"
            @tap="handleUrl(item.goodsId,item.state)"
          >
            <view class="b-goods__title">{{item.title}}</view>
            <view class="b-goods__bottom">
              <view class="group">
                <text class="t1">ARS$</text>
                <text class=t2>{{item.price}}</text>
              </view>
              <text class="text2">{{item.praise}}点赞</text>
            </view>
          </view>
        </view>
        <graceLoading :loadingType="loadingType"></graceLoading>
      </scroll-view>
    </view>
    <view class="b-handle">
      <view
        class="b-handle__item all"
        @tap="handleCheckeAll"
      >
        <view
          class="radio"
          :class="[checkedAll?'checkedAll' : '']"
        ></view>
        <view>全选</view>
      </view>
      <view
        class="b-handle__item delete"
        @tap="deleteGoods"
      >
        删除
      </view>
    </view>
  </view>
</template>

<script>
import graceNav from "@/graceUI/components/graceNavBar.vue"
import graceLoading from '../../graceUI/components/graceLoading.vue';
import uniIcons from "@/components/uni-icons/uni-icons"
export default {
  components: { graceNav, graceLoading, uniIcons },


  onLoad(opt) {
    console.log(opt)
    if (opt.index) {
      this.optIndex = Number(opt.index)
      this.getTabList()
    }
  },
  data() {
    return {
      optIndex: '',
      tabId: '',
      cabinetData: [],
      loadingType: 0,
      tabIndex: 0,
      tabs: [],
      checkedAll: false,
      checkedArr: [],
      pageSize: 10,
      cur_page: 1,
      total: 0,
      screenHeight: uni.getSystemInfoSync().screenHeight,
    }
  },

  computed: {

  },
  methods: {
    initData() {
      this.cabinetData = []
      this.cur_page = 0
    },
    scrollBottom(e) {  //到底
      this.loadingType = 1; //加载中
      this.cur_page++;
      if (this.cabinetData.length >= this.total) {
        this.loadingType = 2;
        return;
      }
      setTimeout(() => {
        this.getCabinetData(this.tabs[this.tabIndex].windowId)
      }, 500);
    },

    async getTabList() {
      let res = await this.$http.POST({
        url: '/seller/window/listWindows',
      })
      // console.log(res)
      if (res.code == 200) {
        this.tabs = res.data

        this.$nextTick(() => {
          this.tabIndex = this.optIndex
          this.getCabinetData(this.tabs[this.tabIndex].windowId)
        })



      }
    },
    handleUrl(id, state) {
      uni.navigateTo({
        url: `/pages/GoodsManage/goodsDetail?goodsId=${id}&state=${state}`
      });
    },
    tabChange(tabObj) {
      this.tabIndex = tabObj.index;
      this.tabId = tabObj.id
      this.initData()
      this.getCabinetData(this.tabId)
    },

    async getCabinetData(classifyId = this.tabs[0].windowId) {
      this.$ld()
      let res = await this.$http.POST({
        url: '/seller/goods/page',
        data: {
          classifyId,
          pageNo: this.cur_page,
          pageSize: this.pageSize
        }
      })
      uni.hideLoading()
      if (res.code == 200) {
        for (let item of res.data.list) {
          item.checked = false
        }
        this.cabinetData = this.cabinetData.concat(res.data.list)
        this.total = res.data.totalCount
      }
    },

    handleSelect(i) {
      this.cabinetData[i].checked = !this.cabinetData[i].checked
      for (let item of this.cabinetData) {
        if (!item.checked) {   //取消全选
          this.checkedAll = false
        }
        if (item.checked) {   //全选
          this.checkedArr.push(item)
          this.checkedArr.length >= this.cabinetData.length ? this.checkedAll = true : this.checkedAll
        }
      }
    },
    handleCheckeAll() {
      this.checkedAll = !this.checkedAll
      for (let item of this.cabinetData) {
        if (this.checkedAll) {
          item.checked = true
        } else {
          item.checked = false
        }
      }
    },
    toSearchPage() {
      uni.navigateTo({
        url: `/pages/GoodsSearch/index`
      });
    },
    deleteGoods() {
      console.log(this.checkedArr.length)
      let goodsIds = []
      for (let item of this.cabinetData) {
        if (item.checked) {
          goodsIds.push(item.goodsId)
          uni.showModal({
            title: '提示',
            content: '是否删除选中商品?',
            success: async res => {
              if (res.confirm) {
                this.$ld()
                let res = await this.$http.POST({
                  url: '/seller/goods/remove',
                  data: {
                    goodsIds,
                  }
                })
                uni.hideLoading()
                if (res.code == 200) {
                  item.checked = false
                  this.initData()
                  this.getCabinetData(this.tabs[this.tabIndex].windowId)
                  uni.showToast({ title: '删除成功' })
                }
              }
            }
          })
        } else if (this.checkedArr.length < 1) {
          uni.showToast({ title: '请选择要删除的商品', icon: 'none' })
        }
      }
    }
  }
}

</script>

<style lang="scss" scoped>
@import '@/scss';
.page{
  background: #fff;
  padding-top: 40upx;
}
@include b(search) {
  position: relative;
  background: #fff;
  display: flex;
  justify-content: center;
  input {
    border: 1px solid #eee;
    @include size(470upx, 52upx);
    border-radius: 56upx;
    background: #f9f9f9;
    padding-left: 80upx;
  }
  .btn {
    background: #2293ec;
    color: #fff;
    @include size(100upx, 52upx);
    @include flex-center;
    border-radius: 18upx;
    margin-left: 16upx;
  }
  .icon {
    position: absolute;
    left: 72upx;
    top: 50%;
    transform: translateY(-50%);
  }
}
@include b(title) {
  padding: 20upx 30upx 30upx 30upx;
  background: #fff;
}
@include b(goods) {
  background: #fff;
  padding: 0 30upx 30upx 30upx;
  .scroll-Y {
    height: 1000upx;
  }
  @include e(item) {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20upx 0;
    position: relative;
    padding-left: 80upx;
    .radio {
      @include size(32upx, 32upx);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 2upx;
      border: 1px solid #ccc;
    }
    &--checked {
      position: relative;
    }
    &--checked::after {
      content: '';
      background: url('../../static/img/gou.png');
      @include size(30upx, 30upx);
      background-size: 100%, 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    &-left {
      image {
        @include size(160upx, 160upx);
      }
    }
    &-right {
      margin-left: 50upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding-right: 30upx;
    }
  }
  @include e(title) {
    padding-top: 10upx;
  }
  @include e(bottom) {
    padding-bottom: 10upx;
    @include flex-bw;
    .group {
      color: red;
      .t2 {
        font-size: 36upx;
        padding-left: 6upx;
      }
    }
    .text2 {
      color: #999;
      font-size: 24upx;
    }
  }
}
@include b(handle) {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140upx;
  display: flex;
  align-items: center;
  box-shadow: 0 -1px 4px #ddd;
  justify-content: space-between;
  @include e(item) {
    &.delete {
      border: 1px solid #4d91f9;
      @include size(180upx, 64upx);
      color: #4d91f9;
      border-radius: 8upx;
      margin-right: 40upx;
    }
    &.all {
      width: 260upx;
      position: relative;
      .radio {
        @include size(32upx, 32upx);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50upx;
        border: 1px solid #ccc;
      }
      .checkedAll::after {
        content: '';
        background: url('../../static/img/gou.png');
        @include size(30upx, 30upx);
        background-size: 100%, 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    @include flex-center;
    &:nth-child(1) {
      border: 0;
    }
  }
}
</style>